<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <meta name="applicable-device" content="mobile" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title>建设工地人员返岗</title>
    <link rel="stylesheet" href="static/css/vue/index.css">
    <script type="text/javascript">
 		document.write("<link rel='stylesheet' type='text/css' href='static/css/people.css?random="+Math.random()+"'/>");
	</script>
	<link rel="stylesheet" type="text/css" href="static/css/loading.css"/>
 	<script type="text/javascript" src="static/js/echarts.js"></script>
 	<script type="text/javascript" src="static/js/jquery-1.11.1.min.js"></script>
 	<script type="text/javascript" src="static/js/dateUtil.js"></script>
 	<script type="text/javascript">
		document.write("<script type='text/javascript' src='static/js/construction.js?random="+Math.random()+"'></s"+"cript>");
	</script>
 	<script src="static/js/vue/vue.js"></script>
  	<script src="static/js/vue/index.js"></script>
    <script>
        + function() {
            remLayout();
            function remLayout() {
                var w = document.documentElement.clientWidth;
                w = w > 768 ? 768 : w;
                w = w <= 320 ? 320 : w;
                document.documentElement.style.fontSize = w / 7.5 + 'px';
            }
            window.addEventListener('resize', function() {
                remLayout();
            }, false);
        }();
    </script>
	</head>
	<body>

	<div  id="loadDiv" class="bg">
		<div  class="tab_loading" style="font-size:14px">
			加载中。。。
		</div>
	</div>


		<header>
    	<div class="headers" id="headers">
    		<div class="text_left">
    			<span>上海地铁防疫动态</span>
    		</div>
    		<div class="text_right">
    			<span>统计截止日期</span>
    			<div class="hhmm">
					<el-button icon="el-icon-caret-left"  @click="leftButtonClick()" id="leftButton"></el-button>
					<el-date-picker
						:clearable=false
						:editable=false
						v-model="dateValue"
						@change="dateChange"
						:picker-options="pickerOptions"
						type="date"
						placeholder="">
					</el-date-picker>
					<el-button icon="el-icon-caret-right"  @click="rightButtonClick()"  id="rightButton"></el-button>
				</div>
    		</div>
    	</div>
    </header>
		<section>
			<div class="contents">
				<div class="sec_top">
					<div class="top_one">
						<span style="color: #D05300;" id="totalPeople">0</span>
						<p>总人数</p>
					</div>
					<div class="top_two">
						<span style="color: #F29F00;" id="totalReturn">0</span>
						<p>累计返沪人数</p>
					</div>
					<div class="top_three">
						<span style="color: #77033F;" id="totalQuarantine">0</span>
						<p>隔离观察人数</p>
					</div>
					<div class="top_four">
						<span style="color: #00950E;" id="totalAmountOfWork">0</span>
						<p>可返岗人数</p>
					</div>
				</div>
				<div class="sec_two_header">
					<img src="static/img/ico.png"/>
					<span>建设区域人员返沪返岗变化趋势</span>
				</div>
				<div class="sec_x" style="margin-top: -0.1rem!important;"></div>
				<div class="card" >
					<div class="zhu" id="zhu">
					</div>
				</div>
			</div>
			<div class="card_one">
				<div class="sec_two_header">
   					<img src="static/img/ico.png"/>
   					<span>各线路建设区域人员返岗率变化趋势</span>
   				</div>
   				<div class="sec_x" style="margin-top: -0.1rem!important;"></div>
				<div class="card" id="card_one">
				</div>
			</div>
			
		</section>
		<footer style="height:0.2rem;width: 100%;">
   
  </footer>
	</body>
	<script type="text/javascript">
var currentPage=1;
new Vue({
	el: '#headers',
	data: function() {
		var day = new Date();
		day.setTime(day.getTime());
		//如果是最近一天，右侧按钮不能点击
		if(day>new Date(new Date(new Date().toLocaleDateString()).getTime())){
			$("#rightButton").attr("disabled","disabled");
			$("#rightButton").css("color","grey");
		}
		return {
			pickerOptions: {
				disabledDate: (time) => {
					//限制查询时间不能大于昨天
					return time>day;
			       }
			},
			dateValue: day
		}
	},
  	mounted(){
  		window.dateChange = this.dateChange; // 方法赋值给window调用
  		window.conditionDate = this.dateValue;
	},
	methods: {
		leftButtonClick(){
			//时间控件减少一天
			this.dateValue = new Date((this.dateValue.getTime()-24*60*60*1000));
			this.dateChange();
		},
		rightButtonClick(){
			//时间控件减少一天
			this.dateValue = new Date((this.dateValue.getTime()+24*60*60*1000));
			this.dateChange();
		},
		dateChange(){
    		if(this.dateValue>=new Date(new Date(new Date().toLocaleDateString()).getTime())){
				$("#rightButton").attr("disabled","disabled");
				$("#rightButton").css("color","grey");
				$("#rightButton").addClass("is-disabled");
			}else{
				$("#rightButton").attr("disabled",false);
				$("#rightButton").css("color","#8BC8FA");
				$("#rightButton").removeClass("is-disabled");
			}
    		
    		conditionDate = this.dateValue;
			document.getElementById("loadDiv").style.display = 'block';
    		fetchSummary();
    		drawWorkTrend();
    		drawRateWorkGroupByProject();
			setTimeout(() => {
				document.getElementById("loadDiv").style.display = 'none';
				document.getElementById("metroBody").classList.remove("metro_body_hidden")
				document.getElementById("metroBody").classList.add("metro_body_auto")
			}, 500)
    	}
    	
   	}
});
</script>
</html>
